<template >
    <div>
        <div class="bgImg">
            <!-- <div class="imgOne"></div>
            <div class="imgTwo"></div>
            <div class="imgThree"></div>
            <div class="imgFour"></div> -->
        </div>
        <div v-for="item in fileList" :key="item.name">
            <!-- <img v-if="item.type==='doc'" :src="docImg" /> -->
            <div v-if="item.type==='doc'" class="imgFour"></div>
            <img v-if="item.type==='excel'" :src="excelImg" />
            <img v-if="item.type==='pdf'" :src="pdfImg" />
            <span>{{item.name}}</span>

        </div>

    </div>

</template>
<script>
export default {
    name: "Cart2",
    data() {
        return {
            isdoc: "doc",
            isexcel: false,
            ispdf: false,
            docImg: require("../../assets/doc.png"),
            excelImg: require("../../assets/excel.png"),
            pdfImg: require("../../assets/pdf.png"),
            // 假数据
            fileList: [
                { name: "food2.excel", url: "" },
                { name: "food2.doc", url: "" },
                { name: "food3.pdf", url: "" }
            ]
        };
    },
    created() {
        this.showimg();
        this.checkType();
    },
    methods: {
        showimg() {
            for (let i = 0; i < this.fileList.length; i++) {
                let b = [];
                let a = this.fileList[i].name;
                b = a.split(".");
                let c = b[1];
                if (c === "doc") {
                    this.isdoc = true;
                    console.log(this.isdoc);
                }
            }
        },
        // 定义一个函数
        docName(item) {
            // 获取文件名
            let name = item.name;
            // 获取要截取得起始位置（最后一个点）
            let indexStart = name.lastIndexOf(".");
            // 获取最后的索引位置（等同于字符串的长度）
            let indexEnd = name.length;
            // 截图我们需要的文件类型名称
            let type = name.substring(indexStart + 1, indexEnd); //后缀名
            return type;
        },
        // 处理所有的数据
        checkType() {
            let that = this;
            // 数组的操作（遍历数组）
            that.fileList.map((item, index) => {
                // 通过定义的函数的获取文件类型名称并复赋值临时变量
                let type = that.docName(item);
                // 给每一个数组中的数据加上type属性
                item.type = type;
            });
            console.log(that.fileList);
        }
    }
};
</script>
<style lang='less' scoped>
.bgImg {
    width: 100%;
    // display: flex;
    .imgOne {
        width: 128px;
        height: 128px;
        background-color: aqua;
        margin-right: 10px;
        background-image: url("../../assets/timg.jpg");
        background-repeat: no-repeat;
        background-position: -30px, 0px;
    }
    .imgTwo {
        width: 128px;
        height: 128px;
        background-color: red;
        background-image: url("../../assets/timg.jpg");
        background-repeat: no-repeat;
        background-position: -191px, 0px;
    }
    .imgThree {
        width: 128px;
        height: 128px;
        background-color: red;
        background-image: url("../../assets/timg.jpg");
        background-repeat: no-repeat;
        background-position: -387px, 0px;
    }
    .imgFour {
        width: 128px;
        height: 128px;
        background-color: red;
        background-image: url("../../assets/timg.jpg");
        background-repeat: no-repeat;
        background-position: -549px, 0px;
    }
}
.imgFour {
    width: 128px;
    height: 128px;
    background-color: red;
    background-image: url("../../assets/timg.jpg");
    background-repeat: no-repeat;
    background-position: -549px, 0px;
    position: relative;
    left: 750px;
}
</style>

